<template>
    <div id="main">
        <el-form :model="ruleForm"  :rules="rules" ref="ruleForm"  label-width="100px" class="demo-ruleForm">

            <el-form-item label="用户名"  prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>

            <el-form-item label="密码"   prop="upwd">
                <el-input v-model="ruleForm.upwd"></el-input>
            </el-form-item>

            <el-form-item label="确认密码"   prop="upwd2">
                <el-input v-model="ruleForm.upwd2"></el-input>
            </el-form-item>
            <el-form-item label="性别"  prop="sex">
                <el-input v-model="ruleForm.sex"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>

            <el-form-item label="邮箱" >
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="地址" >
                <el-input v-model="ruleForm.addr"></el-input>
            </el-form-item>

            <!--图片上传-->
            <el-form-item label="用户头像">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8081/user/upload"
                        :before-upload="before"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :on-err="uploadErr"
                        :with-credentials="true">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

            </el-form-item>

            <el-form-item  >
                <el-button v-on:click="addUser()">添加</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Rigister",
        data(){
            var  validateUpwd=(rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validateUpwd2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.upwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }

            };
            var checkSex= (rule, value, callback) => {
                var pa = ["男","女"]
                if(!pa.includes(value)){
                    callback(new Error('性别只能为男、女'));
                }
            }
            return{
                imageUrl:'',
                ruleForm: {
                    uname:'',
                    upwd:'',
                    upwd2:'',
                    phone:'',
                    email:'',
                    avatar:'null.png',
                    addr:'',
                    sex:'',
                    age:'',
                },
                rules: {
                        uname: [
                            {required: true, message: '请输入用户名', trigger: 'blur'},
                            {min: 3, max:8, message: '长度在 3 到 8个字符', trigger: 'blur'}
                        ],
                        upwd:[
                            { validator: validateUpwd, trigger: 'blur' },
                            {required: true, message: '请输入密码', trigger: 'blur'},
                            {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                        ],
                        upwd2: [
                            { validator: validateUpwd2, trigger: 'blur' },
                        ],
                        age: [
                            { validator: checkAge, trigger: 'blur' },
                        ],
                        sex:[
                            { validator: checkSex, trigger: 'blur' },
                        ],
                    phone: [
                        {min: 11, max: 11, message: '长度11 个字符', trigger: 'blur'}
                    ]
                    }
            }
        },mounted(){


        },
        methods:{
            before(file){
                console.log("上传文件前====》")

            },
            handleAvatarSuccess(res, file) {
                this.ruleForm.avatar= file.name;//从后台获取filename给path赋值
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            uploadErr(err,file,fileList){
                console.log("upload err=========>"+file.name)
            },
            addUser(){
                let uname=this.ruleForm.uname;
                let upwd=this.ruleForm.upwd;
                let phone=this.ruleForm.phone;
                let email=this.ruleForm.email;
                let avatar=this.ruleForm.avatar;
                let addr=this.ruleForm.addr;
                let sex=this.ruleForm.sex;
                let age=this.ruleForm.age;

                //将参数传递到后台
                this.$http.get("http://localhost:8081/user/register?uname="+uname+"&upwd="+upwd+"&phone="+phone+
                    "&email="+email+"&avatar="+avatar+"&addr="+addr+"&sex="+sex+"&age="+age).then(req=>{
                    if(req.data!=null){
                        alert("账号为："+req.data);
                        this.$router.push("/");
                    }else{
                        alert("失败")
                    }
                })
            },

        },





    }
</script>

<style scoped>
    #main{
        padding: 0;
        margin: 0;
        margin: 0 auto;
        width: 600px;
        height: 600px;

    }
</style>